<template>
  <div class="coachFrmPage">
    <div class="layoutCon">
      <div class="topInfo">
        <div class="info">
          <p class="tit"><b>신청하기</b>{{getTit()}}</p>
          <p class="tips"><b>신청서 조회</b> (※ 아래 작성하신 신청서 내용을 확인해주세요.)</p>
        </div>
        <div class="steps">
          <ul>
            <li>신청대기</li>
            <li>임시저장</li>
            <li :class="infoData&&infoData.edit_status==2&&'active'">신청완료</li>
            <li :class="infoData&&infoData.edit_status==3&&'active'">코칭완료</li>
          </ul>
        </div>
      </div>
      <div class="toolBar">
        <el-button class="btnBack" @click="back">목록으로</el-button>
      </div>
      <div class="coachInfo" v-loading="loading">
        <el-form v-if="infoData" class="frm" label-position="top">
        <div class="comTit">기본정보<span><i>*</i>필수입력사항</span></div>
        <el-form-item label="이름" prop="user_name" class="x">
          <el-col :span="14" :xs="12">
            <el-input readonly v-model="infoData.user_name"></el-input>
          </el-col>
          <el-col :span="10" :xs="12">
            <el-radio-group v-model="infoData.sex" disabled>
                <el-radio-button label="1">남자</el-radio-button>
                <el-radio-button label="2">여자</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="휴대폰번호" prop="phone" class="x">
            <el-input readonly placeholder="010-123-1234" v-model="infoData.phone"></el-input>
        </el-form-item>
        <el-form-item label="이메일" prop="email" class="x">
            <el-input readonly placeholder="example@workwiz.com" v-model="infoData.email"></el-input>
        </el-form-item>
        <el-form-item label="이력서 첨부하기" class="xl">
            <el-button class="minBtn fl" plain @click="download(infoData.resume,0)">이력서 다운로드</el-button>
        </el-form-item>
        <div class="comTit">신청정보</div>
        <div class="list">
          <div class="proBox" v-for="(item,index) in infoData.answers" :key="item.index">
            <el-form-item>
              <div class="q" v-html="formatTit(item.questions[0].title)"></div>
              <div class="a">
                <el-input readonly type="textarea" v-model="item.content" :rows="2"></el-input>
              </div>
            </el-form-item>
          </div>
        </div>
        <template v-if="infoData.edit_status==3">
          <div class="resTit">코칭결과</div>
          <div class="comTit nt">기본정보</div>
          <el-form-item label="보고서" v-if="infoData.report&&infoData.report.length">
            <el-button type="primary" class="subBtn mt" @click="download(infoData.report,1)">보고서 다운로드</el-button>
          </el-form-item>
          <el-form-item label="코멘트">
            <div class="comTxt">
              <el-input readonly type="textarea" v-model="infoData.remark" :rows="2"></el-input>
            </div>
          </el-form-item>
        </template>
        <!-- <el-form-item class="btns">
            <el-button type="primary" class="subBtn" @click="goMyCoach">확인</el-button>
            <el-button @click="goMyCoach" class="plain">취소</el-button>
        </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { serviceInfo, download } from '@/api'

export default {
  name:'',
  components:{ },
  props:[],
  data(){
    var validateMobile = (rule, value, callback) => {
      if (value==='') {
        callback(new Error('휴대폰번호를 입력해 주세요.'));
      } else if(!value.match( /^[0-9]{3}[0-9]{4}[0-9]{4}$/ )) {
        callback(new Error('정상적인 전화번호를 입력해주세요.'));
      }else{
        callback();
      }
    };
    return {
      order_id:0,
      loading:true,
      file:null,
      fileName:'',
      errors:{
        upload:'',
      },
      type:0,
      frm:{
        order_id:'',
        user_name:'',
        sex:1,
        phone:'',
        email:'',
        resume:'',
        remark:'',
        answers:[],
        edit_status:0,
      },
      questions:[],
      infoData:null
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  created(){
    this.order_id=this.$route.query.id||'';
    this.type=this.$route.query.type||1;
    this.getInfo()
  },
  mounted(){
  },
  methods:{
    async getInfo(){
      let res = await serviceInfo({id:this.order_id});
      if (res.code == 200) {
        this.loading=false;
        this.infoData=res.data;
        if(res.data.resume&&res.data.resume.length){
          this.fileName=res.data.resume[0].url;
        }
      }else{
        this.loading=false;
      }
    },
    formatTit(txt){
      return "Q. "+txt.replace(/\/n/g,'')
    },
    goMyCoach(){
      this.$router.replace('/my/coach')
    },
    downFile(url,type){
      if(type==1&&url==''){
        this.$alert('업로드한 이력서가 없습니다.', '알림', {
          confirmButtonText: '확인',
        })
        return false;
      }
      window.open(url, '_blank');
    },
    async download(data,type){
      let _id=0;
      if(type==0&&data&&data.length==0){
        this.$alert('업로드한 이력서가 없습니다.', '알림', {
          confirmButtonText: '확인',
        })
        return false;
      }
      let res = await download({id:data[0].id,type:type});
      if (res.status==200) {
          let fileName = decodeURIComponent(res.headers.filename)
          fileName = fileName.replace(/\+/g, ' ')
          const blob = new Blob([res.data], { type: res.data.type })
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName)
          } else {
            var link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(link.href)
          }
      }
    },
    getTit(){
      let _tit='',_type=parseInt(this.type);
      switch(_type){
        case 2: return '이력서 클리닉'; break;
        case 3: return '채용정보서칭'; break;
        case 4: return '모의 서류전형'; break;
        case 5: return '모의 면접'; break;
        default: return '취업상담'; break;
      }
    },
    back(){
      this.$router.back();
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/coach.scss";
</style>
